<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" >
       <title>可视化大屏</title>
    <link rel="stylesheet" type="text/css" href="../static/css/style.css">
    <style>
        .scroll-container {
            background-image: linear-gradient(to right, #0000FF, #800080);
            font-size:13px;
            width: 375px;
            height: 200px;
            overflow: hidden;
            border: 2px solid #ccc;
            border-radius: 15px;
            position: relative;
            left:1100px;
            top:-200px;
        }
        .scroll-content {
            position: absolute;
            top: 0;
            animation: scroll 90s linear infinite;
        }

        @keyframes scroll {
            0% {
                transform: translateY(0);
            }

            100% {
                transform: translateY(calc(-100% + 60px)); /* 一个项目的高度为 60px */
            }
        }
        .item {
            height: 60px;
            line-height: 60px;
            padding: 10px;
            border-bottom: 1px solid #ddd;
            color:white;
        }
        .pulll_left counter,.pulll_left{
             color:white;
        }
        .bar {
            position: relative;
            left: 1160px;
            top: -610px;
            border: 2px white solid;
            width:250px;
            border-radius: 18px;
        }

        .barbox {
            width: 200px;
            position: relative;
        }

        .barbox li {
            font-size: 24px;
            text-align: center;
            position: relative;
            color: #ffeb7b;
            font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
            font-weight: bold;
        }

        .barbox:before,
        .barbox:after {
            position: absolute;
            width: 0.3px;
            height: 0.1px;
            content: "";
        }

        .barbox:before {
            border-left: 2px solid #02a6b5;
            left: 0;
            border-top: 2px solid #02a6b5;
        }

        .barbox:after {
            border-right: 2px solid #02a6b5;
            right: 0;
            bottom: 0;
            border-bottom: 2px solid #02a6b5;
        }

        .barbox li:first-child:before {
            position: absolute;
            content: "";
            height: 50%;
            width: 1px;
            right: 0;
            top: 25%;
        }

        .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }
        .chart-line {
            border: 2px white solid;
            position: absolute;
            top: 630px; /* 向上移动20像素 */
            left: 10px;
            width: 700px;
            height: 500px; /* 假设图表的高度为300px */
            display: flex;
            align-items: center;
            justify-content: center;
            padding:40px;
        }
        .chart-bar{
            border: 2px white solid;
            position: absolute;
            top:630px;
            left: 800px;
            width: 620px;
            height: 500px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px;
        }
        .chart-title {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
            font-size: 1.5em;
            color: white; /* 标题颜色 */
            /* 确保标题不会超出容器 */
            white-space: nowrap;
            margin: 0; /* 移除默认的边距 */
            padding:20px;
            font-weight: bold; /* 文本加粗 */
    }
    </style>
</head>
<body>
    <div>
        <img src="\static\images\t_header.png" alt="顶部图片" class="top-header">
        <h1>可视化大屏</h1>
        <div class="date-component">
            <span id="current-date"></span> <!-- 添加一个用于显示日期的span元素 -->
        </div>
        <div class="chart-map">{{ map_chart | safe }}</div>
        <div class="chart-bar">{{ bar_chart | safe }}
             <div class="chart-title">各收入类型分省统计</div>
        </div><!--各收入类型分省统计-->
        <div class="chart-line">
            {{ line_chart | safe }}
            <div class="chart-title">各省市的A级景区数量与接待人次和门票收入关系</div>
        </div><!--各省市的A级景区数量与接待人次和门票收入关系-->
        <div class="chart-pie">
            <div class="image-title">
              各省市旅游机构数量
            </div>{{ pie_chart | safe }}
        </div>
        <div class="scroll-container">
            <div class="scroll-content" id="scroll">
                <!-- 数据将通过 JavaScript 动态添加到这里 -->
            </div>
        </div>
        <div class="bar">
            <div class="barbox">
                <ul class="clearfix">
                    <li class="pulll_left">旅游总人数</li>
                    <li class="pulll_left counter">32.46亿</li>

                </ul>
            </div>
            <div class="barbox">
                <ul class="clearfix">
                    <li class="pulll_left">旅游总花费</li>
                    <li class="pulll_left counter">29190.75亿</li>
                </ul>
            </div>
        </div>
    </div>
    <script src="../static/js/Carousel.js"></script>
    <script>
        // 阻止缩放和处理鼠标滚轮事件
        window.addEventListener('wheel', function(e) {
            e.preventDefault();
            var deltaY = e.deltaY || e.detail || e.wheelDelta;
            if (deltaY > 0) {
                window.scrollBy(0, 100); // 向下滚动100像素
            } else {
                window.scrollBy(0, -100); // 向上滚动100像素
            }
        }, { passive: false });
        // 获取当前日期和时间并更新页面上的日期和时间显示
        function updateDateTime() {
            var currentDate = new Date();
            var year = currentDate.getFullYear();
            var month = currentDate.getMonth() + 1; // 月份是从0开始的
            var day = currentDate.getDate();
            var hours = currentDate.getHours();
            var minutes = currentDate.getMinutes();
            var dateString = year + '年' + month + '月' + day + '日 ' + hours + '时' + minutes + '分';
            document.getElementById('current-date').textContent = dateString;
        }

        // 页面加载完成后立即更新日期和时间，并设置为每分钟自动更新
        window.onload = function() {
            updateDateTime();
            setInterval(updateDateTime, 60 * 1000); // 每分钟更新一次
        };
    </script>
</body>
</html>
